import { claimDetail } from '@/api/company'
import type { ClaimDto, ClaimItemDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import { getModelValue, type FormModalDto } from '@/components/modal/Modal'
import { periodOverageReduce, updateAllowOverageEnsure } from '@/api/insurance/period'
import Dialog from '@/components/dialog/Index'
import { Button, Input, message } from 'ant-design-vue'

@Component
export class DialogClaimRate extends TableRender {
    @Prop() companyId!: number
    @Prop() show!: boolean
    @Prop() companyName!: string

    showDialog = false
    noTablePadding = true

    iptValue = null
    curItem = {} as VxeTableDataRow

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
        if (this.showDialog) {
            this.getData()
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    // 账户余额提现
    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '',
            width: '450px',
            theme: 'light',
            show: false,
            items: {
                insurEndDay: {
                    name: '备注',
                    element: 'datetime',
                    params: {
                        valueformat: 'YYYY-MM-DD'
                    }
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                data.companyId = this.companyId
                data.companyPlanId = this.curItem?.companyPlanId
                data.ids = [this.curItem?.id]
                await periodOverageReduce(data)
                message.success('操作成功')
                this.handleRefresh()
                this.formConfig.show = false
            },
            cancel: () => {
                this.formConfig.show = false
            },
            init: async () => {}
        } as FormModalDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'userName',
            title: '姓名'
        },
        {
            field: 'idCardNo',
            title: '身份证号'
        },
        {
            field: 'age',
            title: '年龄'
        },
        {
            field: 'insurStartTime',
            title: '生效时间'
        },
        {
            field: 'insurEndTime',
            title: '结束时间'
        },
        {
            field: 'operate',
            title: '操作',
            params: {
                buttons: [
                    {
                        text: '减保',
                        event: (row) => this.onShowReduce(row)
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<ClaimDto>

    async onShowReduce(row: VxeTableDataRow) {
        this.curItem = row
        this.formConfig.show = true
    }

    async onSubmit() {
        await updateAllowOverageEnsure({
            companyId: this.companyId,
            allowOverageEnsure: this.iptValue
        })
    }

    getData() {
        this.onPage({
            type: 'current',
            currentPage: 1
        })
    }

    async onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.companyId) return []
        const res = await claimDetail({
            companyId: this.companyId
        })
        const map = {
            periodInsur: '长期保',
            dailyInsur: '日日保',
            tyInsur: '团意险'
        }
        for (const key in map) {
            if (!res[key as keyof typeof map]) {
                res[key as keyof typeof map] = {} as ClaimItemDto
            }
            res[key as keyof typeof map]!.insureTypeName = map[key as keyof typeof map]
        }
        const tableData = Object.values(res)

        return new Promise<any[]>((resolve) => {
            resolve(tableData)
        })
    }

    render() {
        return (
            <Dialog v-model:show={this.showDialog} title="超龄投保设置">
                <div class="flex">
                    <div>
                        <Input
                            v-model:value={this.iptValue}
                            type="number"
                            v-slots={{
                                prepend: () => {
                                    return <div>允许超龄人数</div>
                                }
                            }}
                        ></Input>
                    </div>
                </div>
                <div class="flex my-20px">
                    <div class="font-bold">数据列表</div>
                    <div>当前超65岁以上人员：</div>
                    <div class="text-blue-default">0人</div>
                </div>
                {super.renderTable()}
                <div class="mt-20px flex justify-center">
                    <Button type="primary" onClick={this.onSubmit}>
                        提交
                    </Button>
                    <Button onClick={() => (this.showDialog = false)}>取消</Button>
                </div>
            </Dialog>
        )
    }
}

export default toNative<{ companyId: number }, {}>(DialogClaimRate)
